<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    
   <div id="app">
       <!-- keep-alive里面的组件都会被缓存  除非有include 或者 exclude  -->
       <!-- include和exclude 指定的都是 组件内部的name属性的值 而不是组件标签名自身 -->
         <keep-alive>
                <component :is="cn"></component>
        </keep-alive>
        
         <button @click="fn1">我是根组件的按钮</button>
   </div>

   <script>

    const app = Vue.createApp({
            data(){
                return{
                    cn:'t1'
                }  
            },
            methods:{
                fn1(){
                    this.cn =  this.cn=='t1'?'t2':'t1'
                }
            }
    })
    
     app.component('t1',{
         name:'a1',
         template: `
         <h1>我是t1 {{msg1}}  </h1> 
         <button @click="msg1='wa!!!' ">我是t1的按钮</button>`,
         data(){
             return {
                 msg1: '我是t1的内容'
             }
         },
         created(){
             console.log('t1 created')
         },
         // activated和 deactivated都是keepalive中生效的组件的生命周期函数
         activated(){
            console.log('缓存中的t1 被激活')
         },
         deactivated(){
            console.log('缓存中的t1 被缓存')
         }
     })

     app.component('t2',{
         name:'a2',
        template: `<h1>我是t2 {{msg}}</h1> <button @click="fn2">我是T2里面的按钮</button> `,
        data(){
            return {
                msg:'himan'
            }
        },
        methods:{
            fn2(){
                this.msg = 'higirl'
            }
        },
        created(){
            console.log('t2 created')
        },
         activated(){
            console.log('缓存中的t2 被激活')
         },
         deactivated(){
            console.log('缓存中的t2 被缓存')
         }
     })
    app.mount("#app")
   </script>

</body>
</html>